<template>
    <div class="body">
        <div class="left_nav">  
            <div @click="shoumodel(index,item.id)" :class="shouindex===index?'navitem':'navitemed'" v-for="(item,index) in tempcatearr" :key="index" >{{item.name}}</div>
        </div>
        <div class="rigth_item">
            <div class="head_img"><img :src="tempcatearr[shouindex].cate_image"></div>
            <div class="items">
                <div class="item">
                    <div><img src=""></div>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"all",
    data() {
        return {
          tempcatearr:[],
          shouindex:0  
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            this.$http({
                method:"get",
                url:this.$util.baseUrl+'app/getcateall',
            }).then((res)=>{
                this.tempcatearr = res.data.data
            })
        },
        shoumodel(index,id){
            this.shouindex = index;
            let data={
                id:id
            }
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/getcateinfos',
                data:data
            }).then((res)=>{
                console.log(res)
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .body{
        display: flex;
    }
    .left_nav{
        width: 25%;
        height: 100vh;
        background: #cccccc;
        .navitem{
            width: 100%;
            height: 130px;
            background: white;
            text-align: center;
            line-height: 130px;
            font-size: 35px;
            border-left: 5px solid red;
            color: blue;
        }
        .navitemed{
            width: 100%;
            height: 130px;
            text-align: center;
            line-height: 130px;
            font-size: 35px;
        }
    }
    .rigth_item{
        width: 75%;
        height: 100vh;
        .head_img{
            width: 100%;
            height: 250px;
            img{
              width: 100%;
              height: 100%;  
            }
        }
        .items{
            width: 90%;
            height: 500px;
            margin: auto;
            margin-top: 50px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .item{
                width: 40%;
                height: 200px;
                border-radius: 20px;
                background: red;
                margin-top: 20px;
                margin-left: 30px;

            }
        }
    }
</style>